<template>
    <div class="box">
        <h3>代理服务器的开发和使用</h3>
        <ol>
            <li>在vue.config.js 文件中通过 devServe.proxy 选项完成代理服务器开启配置（详细配置参考配置描述）</li>
            <li>重启服务器【如果调整了代理服务器日志模式为debug，可以在启动是看到创建过程】
                <img src="@/index/assets/33.png" alt="" srcset="">
            </li>
            <li>vue请求中，基于代理拦截配置前缀，完成请求定义，此时代理服务器将开始完成代理操作，过程如下
                <img src="@/index/assets/34.png" alt="" srcset="">
            </li>
        </ol>
        <p>devServe.proxy 配置</p>
        <img src="@/index/assets/35.png" alt="" srcset="">
        <p>vue模块化项目中的代理服务器，在npm run serve 时会启动【开发环境】</p>
        <p>vue模块化项目中的代理服务器，在npm run build 时不会启动【生产环境】</p>
        <p>全局环境变量 process.env.NODE_ENV , 该变量在 npm run serve时值为 development;在npm run build 时为 production </p>
        <pre>{{ result }}</pre>
        <input type="button" value="requestProxyTypes" @click="requestProxyTypes()">
        <hr>
        <h3>vue模块化项目的环境文件</h3>
        <ol>
            <li>环境文件以 .env.任意名称 定义于项目根目录【和package.json为同目录文件】</li>
            <li>环境文件内容的定义使用 行作为变量值区分，所有一行一个配置 , 以 key=value 方式组成</li>
            <li>环境中文件中只有以 VUE_APP_任意名称 定义的变量才可以在程序运行时 被 process.env 加载读取</li>
            <li>环境中文件中定义的其它变量，在程序启动的过程可以被加载
                <img src="@/index/assets/36.png" alt="" srcset="">
            </li>
            <li>不同名称的环境文件需要通过不同 mode 设置命令进行加载启动【 vue-cli-service 方式 --mode 环境模式 】
                <img src="@/index/assets/37.png" alt="" srcset="">

            </li>
        </ol>
        <input type="button" value="printEnv" @click="printEnv()">
    </div>
</template>

<script>
import api from "@/index/api";
export default {
    data() {
        return {
            result: {}
        }
    },
    methods: {
        async requestProxyTypes() {
            this.result = await api.loadProxyTypes()
        },
        printEnv(){
            // console.log(process.env)
            console.log("运行时process.env.AAA:",process.env.AAA)

        }
    },
}
</script>

<style lang="scss" scoped>

</style>